/**
 * 主界面路由组件
 */
 import React, { Component } from 'react'
 import {Redirect, Route, Switch} from 'react-router-dom'
 import {connect} from 'react-redux'
 import Cookies from 'js-cookie'    // 可以操作前端cookie的对象 set/get/remove() 
 import { NavBar } from 'antd-mobile'
 import BossInfo from '../bossInfo/BossInfo'
 import Boss from '../boss/Boss'
 import DashenInfo from '../dashenInfo/DashenInfo'
 import Dashen from '../dashen/Dashen'
 import Message from '../message/Message'
 import Personal from '../personal/Personal'
 import {getRedirectTo} from '../../utils/index'
 import { getUser } from '../../redux/actions'
 import NotFound from '../../components/notFound/NotFound'
 import FooterNav from '../../components/footerNav/FooterNav'
 class Main extends Component {

    // 给组件对象添加属性
    navList = [ // 包含所有导航组件的相关信息数据
        {
        path: '/boss', // 路由路径
        component: Boss,
        title: '大神列表',
        icon: 'dashen',
        text: '大神',   
        hide: false
        },
        {
        path: '/dashen', // 路由路径
        component: Dashen,
        title: '老板列表',
        icon: 'boss',
        text: '老板',
        hide: false,
        },
        {
        path: '/message', // 路由路径
        component: Message,
        title: '消息列表',
        icon: 'message',
        text: '消息',
        },
        {
        path: '/personal', // 路由路径
        component: Personal,
        title: '用户中心',
        icon: 'personal',
        text: '个人',
        }
    ]


    componentDidMount(){
        // cookie中有userId但是没有登录
        const userId = Cookies.get('userId')
        const {_id} = this.props.user
        if(userId && !_id){
            // 发送异步请求，获取user
            this.props.getUser()
        }
    }
     render() {
        /**
         * 1. 实现自动登录
         *     1). 如果cookie中有userId，发请求获取对应的user，暂时不做展示
         *     2). 如果cookie中没有userId，自动进入login界面
         * 2. 如果已经登录，如请求根路径，根据user的type和header计算出一个重定向的路由路径，
         *     并自动重定向
         */

        //  // 读取cookie中的userId
        const userid = Cookies.get('userId')
         // cookie中没有userId,重定向到login界面
        if(!userid){
            return <Redirect to='/login'/>
        }
         // cookie中有userId, 读取redux中的user
        const {user} = this.props
        if(!user._id){
            return null
        }else{
            let path = this.props.location.pathname
            if(path==='/'){
                path = getRedirectTo(user.type, user.header)
                return <Redirect to={path} />
        }
        }
        const {_id} = this.props.user
        if(!_id){
            return <Redirect to='/login'/>
        }

        const {navList} = this
        const path = this.props.location.pathname
        const currentNav = navList.find(nav => nav.path === path)
        if(currentNav){
            if(user.type === 'dashen')
                navList[0].hide = true
            else 
                navList[1].hide = true
        }
        return (
            <div>
                {currentNav? <NavBar>{currentNav.title}</NavBar>: null}
                <Switch>
                    {navList.map((nav) => <Route path={nav.path} component={nav.component}/>)}
                    <Route path='/bossInfo' component={BossInfo}/>
                    <Route path='/dashenInfo' component={DashenInfo}/>
                    <Route component={NotFound}/>
                </Switch>
                {currentNav? <FooterNav navList={navList}/>: null}
            </div>
        
        )
     }
 }

 export default connect(
     state =>({user: state.user}),
     {getUser}
 )(Main)
 
 